<template>
    <div class="content-container" direction="vertical">
        <div>
            <el-container class="content-row" >
                <div class="input-tip">
                    商品名称：
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.goodName" placeholder="请输入商品名称"></el-input>
                </div>               
                <div class="input-tip">
                    用户名称：
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.name" placeholder="请输入用户名称"></el-input>
                </div>
                <div class="input-tip">
                    手机号码：
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.phone" placeholder="请输入手机号码"></el-input>
                </div>
            </el-container>
            <el-container class="content-row">  
                <div class="input-tip">
                    订单类型：
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.orderType" placeholder="请输入用户名称"></el-input>
                </div>
                <div class="input-tip">
                    平台单号：
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.platformNumber" placeholder="请输入手机号码"></el-input>
                </div>                             
                <div class="input-tip">
                    支付时间：
                </div>
                <div class="input-field">
                    <el-date-picker 
                    v-model="queryParam.payTime" 
                    placeholder="" 
                    type="daterange" 
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-container>
        </div>        
        <div class="content-row">
            <el-container>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="primary" @click="clear">清空搜索条件</el-button>
                <el-button type="primary" @click="exportData">导出</el-button>             
            </el-container>
        </div>
        <!-- list列表 -->
        <div>           
            <el-table 
            :data="financialDetailList"
            tooltip-effect="dark"
            style="width:1100px;"
            :header-cell-style="{'text-align':'center'}"  
            :cell-style="{'text-align':'center'}"
            stripe  
            max-height="400"
            border
            fit>  
                <el-table-column type="index" width="80" label="序号"/>            
                <el-table-column label="订单名称" width="300" prop="orderName"></el-table-column> 
                <el-table-column label="订单类型" width="120" prop="orderType"></el-table-column>               
                <el-table-column label="单号" width="200" prop="orderNumber"></el-table-column>
                <el-table-column label="用户" width="100" prop="name"></el-table-column>
                <el-table-column label="支付方式" width="100">
                    <template #default="scope">
                        <el-tag :type="scope.row.payType ? 'success' : ''">{{scope.row.payType ? '网络支付' : '线下支付'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="时间" width="200" prop="time" sortable ></el-table-column>                          
            </el-table>
        </div>
    </div>
</template>

<script>
import Mock from '../../mock/Mock'
import Tools from '@/tools/Tools' 
export default {
   data() {
    return {
        // 财务明细列表数据
        financialDetailList: [],
        // 筛选订单参数
        queryParam: {
            goodName: '',
            phone: '',
            name: '',
            payTime: '',
            orderType: '',
            platformNumber: ''
        },
    }
   },
   mounted (){
    this.financialDetailList = Mock.getFinancialDetailList();
   },
   //路由更新时刷新数据
   beforeRouteUpdate (to){
    this.financialDetailList = Mock.getFinancialDetailList();
   },
   methods: {
    // 模拟请求数据
    search(){
        this.$message({
            type: 'success',
            message: '筛选请求参数：' + JSON.stringify(this.queryParam)
        })
        this.financialDetailList = Mock.getFinancialDetailList();
    },
    // 清空筛选项
    clear(){
        this.queryParam = {
            goodName: '',
            phone: '',
            name: '',
            payTime: '',
            orderType: '',
            platformNumber: ''
        }
        this.financialDetailList = Mock.getFinancialDetailList();
    },
    // 导出订单
    exportData() {
        Tools.exportJson('订单.json',JSON.stringify(this.managerOrderList));
    }
   }
}
</script>